<template>
  <div class="w-full h-full" ref="subsidiaryChartRef"> </div>
</template>
<script setup lang="ts">
import echarts from '@/plugins/echarts'
defineOptions({ name: 'repPriceTrendLine' })
const subsidiaryChartRef = ref()
function init(data) {
  const {  xAxis, data: lineData } = data;
  const [line1, line2, line3] = lineData  
  var myChart = echarts.init(subsidiaryChartRef.value)
  // 指定图表的配置项和数据
  var option = {
    color: ['#1B76FF', '#FF803B', '#B46AFF'],
    grid: {
      top: 30,
      right: 30,
      bottom: 30,
      left: 80
    },
    tooltip: {},
    legend: {
      data: ['水泥平均值', '物质公司', '物贸'],
      textStyle: {
        fontSize: '14px',
        color: '#222',
      },
      itemGap: 50
    },
    xAxis: {
      data: xAxis,
      axisLabel: {
        color: '#666'
      },
      splitLine:{
        show: false,
      },
      axisLine:{
        show: false,
      },
    },
    yAxis: {
      nameTextStyle: {
        color: '#666',
        fontSzie: '14px'
      },
      axisLabel: {
        formatter: '{value}元'
      }
    },
    series: [
    {
      name: '水泥平均值',
      type: 'line',
      smooth: true,
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: line1
    },
    {
      name: '物质公司',
      type: 'line',
      smooth: true,
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: line2
    },
    {
      name: '物贸',
      type: 'line',
      smooth: true,
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: line3
    },
    ]
  }

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}

defineExpose({ init })
</script>
